<template>
  <div class="I-II-I">
    <table class="I-II-I__table">
      <tr class="I-II-I__table-trone">
        <td class="I-II-I__table-trone-td"
            colspan="9">
          <div class="I-II-I__table-trone-td-title">
            I-2 出版教材质量
            <span class="I-II-I__table-trone-td-title-tips">
              （限 5 项）
            </span>
          </div>
        </td>
      </tr>
      <tr class="I-II-I__table-th">
        <td class="I-II-I__table-th-tdone">
          序号
        </td>
        <td class="I-II-I__table-th-tdtwo">
          教材名称
        </td>
        <td class="I-II-I__table-th-tdthree">
          主要作者/<br>译者
        </td>
        <td class="I-II-I__table-th-tdfour">
          署名<br>情况
        </td>
        <td class="I-II-I__table-th-tdfive">
          出版/再<br>版时间
        </td>
        <td class="I-II-I__table-th-tdsix">
          出版社
        </td>
        <td class="I-II-I__table-th-tdseven">
          版次
        </td>
        <td class="I-II-I__table-th-tdeight">
          教材使用情况
          <span class="I-II-I__table-th-tdeight-tips">
            （限 100 字）
          </span>
        </td>
        <td class="I-II-I__table-th-tdnine">
          备注
        </td>
        <el-button type="success"
                   size="small"
                   icon="el-icon-plus"
                   class="I-II-I__table-th-add-button"
                   circle
                   @click.prevent="addList"/>
      </tr>
      <tr v-for="(item, index) in abas"
          :key="index"
          class="I-II-I__table-tr">
        <td class="I-II-I__table-tr-tdone">
          {{ index + 1 }}
        </td>
        <td class="I-II-I__table-tr-tdtwo">
          <el-input v-model="item.bookName"
                    type="textarea"
                    autosize
                    placeholder="XXXX（共 x 册）"
                    :maxlength="20"/>
        </td>
        <td class="I-II-I__table-tr-tdthree">
          <el-input v-model="item.auther"
                    type="textarea"
                    autosize
                    placeholder="张三"
                    :maxlength="20"/>
        </td>
        <td class="I-II-I__table-tr-tdfour">
          <el-input v-model="item.signture"
                    type="textarea"
                    autosize
                    placeholder="填写署名情况"
                    :maxlength="20"/>
        </td>
        <td class="I-II-I__table-tr-tdfive">
          <el-input v-model="item.time"
                    type="textarea"
                    autosize
                    placeholder="202110"
                    :maxlength="8"/>
        </td>
        <td class="I-II-I__table-tr-tdsix">
          <el-input v-model="item.press"
                    type="textarea"
                    autosize
                    placeholder="填写出版社"
                    :maxlength="20"/>
        </td>
        <td class="I-II-I__table-tr-tdseven">
          <el-input v-model="item.edition"
                    type="textarea"
                    autosize
                    placeholder="第 x 版"
                    :maxlength="20"/>
        </td>
        <td class="I-II-I__table-tr-tdeight">
          <el-input v-model="item.usage"
                    type="textarea"
                    autosize
                    placeholder="教材使用情况"
                    :maxlength="100"/>
        </td>
        <td class="I-II-I__table-tr-tdnine">
          <el-input v-model="item.remarks"
                    type="textarea"
                    autosize
                    placeholder="填写备注"
                    :maxlength="30"/>
        </td>
        <el-button type="danger"
                   size="small"
                   icon="el-icon-delete"
                   class="I-II-I__table-tr-delete-button"
                   circle
                   @click.prevent="deleteItem(index)"/>
      </tr>
    </table>
    <div class="I-II-I__explain">
      <span class="I-II-I__explain-strong">
        说明：①
      </span>
      本表填写评估期内出版或再版的代表性教材（含国外教材译本），仅限“第一作者单位”填写。
      <span class="I-II-I__explain-strong">
        ②
      </span>
      若出版“系列教材”中的多个分册，只填写一次（在教材名称中注明分册数）。
      <span class="I-II-I__explain-strong">
        ③
      </span>
      “署名情况”填写“主编、系列教材总主编、系列教材分册主编”等。
      <span class="I-II-I__explain-strong">
        ④
      </span>
      “教材使用情况”可填写教材使用范围（如学校、院系）、数量（如累计印数、使用人数）等情况。
      <span class="I-II-I__explain-strong">
        ⑤
      </span>
      若教材为国家级规划教材或被评为优秀教材等，请在“备注”栏中注明。
    </div>
  </div>
</template>

<script>
import { getPageData } from '@/utils/getData.js'

export default {
  watch: {
    abas: {
      handler (newVal) {
        sessionStorage['this_data'] = JSON.stringify(newVal)
      },
      deep: true,
      immediate: true
    }
  },
  async mounted () {
    const loading = this.$loading({ lock: true, text: '数据获取中...请稍后！', background: 'rgba(0, 0, 0, 0.7)' })
    this.abas = await getPageData('abas')
    loading.close()
  },
  data () {
    return {
      abas: [{ bookName: '', auther: '', signture: '', time: '', press: '', edition: '', usage: '', remarks: '' }]
    }
  },
  methods: {
    addList () {
      if (this.abas.length < 5) {
        this.abas.push({ bookName: '', auther: '', signture: '', time: '', press: '', edition: '', usage: '', remarks: '' })
      } else {
        Element.toast('最多五个！！！')
      }
    },
    deleteItem (index) {
      if (this.abas.length > 1) {
        this.abas.splice(index, 1)
      }
    }
  }
}
</script>

<style lang="less" scoped>
@import '../../assets/css/page/1-2-1.less';
</style>
